<template>
    <div>
        <el-row>
            <el-col :span="24" class="gutter-row-title">
                <span class='companyTitle'>个人信息</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-row class="gutter-row">
                    <el-col :span="4">
                        <span class="gutter-col-span">姓名</span>
                    </el-col>
                    <el-col :span="20" class="gutter-col">
                        <el-input v-model="personalInformation.name" placeholder="请输入姓名"></el-input>
                    </el-col>
                </el-row>
                <el-row class="gutter-row">
                    <el-col :span="4">
                        <span class="gutter-col-span">职位</span>
                    </el-col>
                    <el-col :span="20" class="gutter-col">
                        <el-input v-model="personalInformation.region" placeholder="请输入职位"></el-input>
                    </el-col>
                </el-row>
                <el-row class="gutter-row">
                    <el-col :span="4">
                        <span class="gutter-col-span">手机</span>
                    </el-col>
                    <el-col :span="20" class="gutter-col">
                        <el-input v-model="personalInformation.phone" placeholder="请输入联系方式"></el-input>
                    </el-col>
                </el-row>
                <el-row class="gutter-row">
                    <el-col :span="4">
                        <span class="gutter-col-span">email</span>
                    </el-col>
                    <el-col :span="20" class="gutter-col">
                        <el-input v-model="personalInformation.Email" placeholder="请输入邮箱"></el-input>
                    </el-col>
                </el-row>
                <el-row class="gutter-row">
                    <el-col :span="4">
                        <span class="gutter-col-span">QQ</span>
                    </el-col>
                    <el-col :span="20" class="gutter-col">
                        <el-input v-model="personalInformation.QQ" placeholder="请输入QQ"></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="4">
                        <div style="width: 100%;text-align: center">
                            <el-button size="medium" type="primary" @click="serverFun" style="background-color: #099FB8">保存</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "MyAccount",
        data() {
            return {
                personalInformation: {
                    name: '',
                    region: '',
                    phone: '',
                    Email:'',
                    QQ:''
                }
            };
        },
        created(){
            this.personInfoFun({clientId:this.$store.state.user.clientId}).then(resp=>{
                console.log(resp)
                this.personalInformation.name = resp.data[0].clientName
                //this.personalInformation.region = resp.data[0].clientName
                this.personalInformation.phone = resp.data[0].clientTel
                //this.personalInformation.Email = resp.data[0].clientName
                //this.personalInformation.QQ = resp.data[0].clientName
            })
        },
        methods:{
            ...mapActions(['personInfoFun']),
            //保存
            serverFun(){

            }
        }
    }
</script>

<style scoped lang="less">
    .companyTitle{
        width: 100%;
        height: 32px;
        font-size: 18px;
        color: #03B8CC;
    }
    .gutter-row-title{
        padding: 16px 0;
    }
    .gutter-row{
        padding: 8px;
    }
    .gutter-col{
        padding-left: 8px;
    }
    .gutter-col-span{
        width: 100%;
        height: 40px;
        text-align: right;
        display: inline-block;
        line-height: 40px;
    }

</style>